<template>
  <div>
    <div id="to_top"></div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
      <a href="#" class="navbar-brand"><i class="fa fa-globe pr-1"></i>ShenzhenSU</a>
      <button
        type="button"
        data-target="#navCollapse"
        data-toggle="collapse"
        aria-expanded="false"
        aria-label="toggle navigation"
        aria-controls="navCollapse"
        class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse collapse" id="navCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <router-link class="nav-link" to="/home"><i class="fa fa-home pr-1"></i>Home</router-link>
            <!--<a href="#" class="nav-link" @click="to_home">Home</a>-->
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/product"><i class="fa fa-product-hunt pr-1"></i>Product</router-link>
            <!--<a href="#" class="nav-link">Home</a>-->
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/technology"><i class="fa fa-keyboard-o pr-1"></i>Technology</router-link>
            <!--<a href="#" class="nav-link">Home</a>-->
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/service"><i class="fa fa-hand-o-right pr-1"></i>Service</router-link>
            <!--<a href="#" class="nav-link">Home</a>-->
          </li>
          <li class="nav-item dropdown">
            <router-link id="dropDown"
                         role="button"
                         data-toggle="dropdown"
                         aria-expanded="false"
                         aria-haspopup="true"
                         class="dropdown-toggle
                         nav-link" to="/contact"><i class="fa fa-phone pr-1"></i>Contact
            </router-link>
            <!--<a id="dropDown" href="#" role="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle nav-link">Home</a>-->
            <div class="dropdown-menu" aria-labelledby="dropDown">
              <div class="dropdown-header">DropDown-Header</div>
              <a href="#" class="dropdown-item">DropDown-Link01</a>
              <a href="#" class="dropdown-item">DropDown-Link02</a>
              <a href="#" class="dropdown-item">DropDown-Link03</a>
              <div class="dropdown-divider"></div>
              <a href="#" class="dropdown-item">Second-Link01</a>
              <a href="#" class="dropdown-item">Second-Link02</a>
            </div>
          </li>
        </ul>
        <form class="form-inline marginTop">
          <input type="search" placeholder="Search" class="mr-1 form-control">
          <button type="submit" class="btn btn-primary">Search</button>
          <i class="fa fa-user mx-2" style="font-size: 1.5rem;" @click="toLogin"></i>
        </form>
      </div>
    </nav>

    <!--<div class="container-fluid">-->
      <!--<div class="row">-->
        <!--<div class="col-lg-3 col-md-2 col-sm-1 px-0 px-lg-0 px-md-0 bg-dark text-light">-->
          <!--something want to display-->
        <!--</div>-->
        <!--<div class="col-lg-9 col-md-10 col-sm-11 px-0 px-lg-0 px-md-0">-->
          <!--<div class="carousel_size_control d-flex justify-content-center align-items-center">-->
            <!--<div class="carousel slide w-100 h-lg-25" id="my_carousel" data-ride="carousel">-->
              <!--<ol class="carousel-indicators">-->
                <!--<li data-target="#my_carousel" class="active" data-slide-to="0"></li>-->
                <!--<li data-target="#my_carousel" data-slide-to="1"></li>-->
                <!--<li data-target="#my_carousel" data-slide-to="2"></li>-->
              <!--</ol>-->
              <!--<div class="carousel-inner d-flex">-->
                <!--<div class="carousel-item active">-->
                  <!--<img class="w-100" src="../../static/picture/blue.png" alt="First Slide">-->
                <!--</div>-->
                <!--<div class="carousel-item">-->
                  <!--<img class="w-100" src="../../static/picture/pepper.png" alt="First Slide">-->
                <!--</div>-->
                <!--<div class="carousel-item">-->
                  <!--<img class="w-100" src="../../static/picture/yellowRed.png" alt="First Slide">-->
                <!--</div>-->
              <!--</div>-->
              <!--<a href="#my_carousel" class="carousel-control-prev" aria-hidden="true" role="button" data-slide="prev">-->
                <!--<span class="carousel-control-prev-icon"></span>-->
              <!--</a>-->
              <!--<a href="#my_carousel" class="carousel-control-next" role="button" aria-hidden="true" data-slide="next">-->
                <!--<span class="carousel-control-next-icon"></span>-->
              <!--</a>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <!--carousel-->
    <!--<div class="carousel_size_control d-flex justify-content-center align-items-center">-->
      <!--<div class="carousel slide h-lg-25" id="my_carousel" data-ride="carousel">-->
        <!--<ol class="carousel-indicators">-->
          <!--<li data-target="#my_carousel" class="active" data-slide-to="0"></li>-->
          <!--<li data-target="#my_carousel" data-slide-to="1"></li>-->
          <!--<li data-target="#my_carousel" data-slide-to="2"></li>-->
        <!--</ol>-->
        <!--<div class="carousel-inner d-flex">-->
          <!--<div class="carousel-item active">-->
            <!--<img class="w-100" src="../../static/picture/blue.png" alt="First Slide">-->
          <!--</div>-->
          <!--<div class="carousel-item">-->
            <!--<img class="w-100" src="../../static/picture/pepper.png" alt="First Slide">-->
          <!--</div>-->
          <!--<div class="carousel-item">-->
            <!--<img class="w-100" src="../../static/picture/yellowRed.png" alt="First Slide">-->
          <!--</div>-->
        <!--</div>-->
        <!--<a href="#my_carousel" class="carousel-control-prev" aria-hidden="true" role="button" data-slide="prev">-->
          <!--<span class="carousel-control-prev-icon"></span>-->
        <!--</a>-->
        <!--<a href="#my_carousel" class="carousel-control-next" role="button" aria-hidden="true" data-slide="next">-->
          <!--<span class="carousel-control-next-icon"></span>-->
        <!--</a>-->
      <!--</div>-->
    <!--</div>-->
    <div class="jumbotron mb-0" style="margin-top: 56px;">
      <h1 class="display-4">Welcome!</h1>
      <p>It is a chance to make everyone success, is it?</p>
      <router-link to="/" class="btn btn-primary" role="button">Join us >></router-link>
    </div>
    <!--<main role="main">-->
        <!--<div class="d-md-flex text-center">-->
          <!--<div class="w-100 p-md-3 p-2">-->
            <!--<h1>Header<small class="text-muted">subTitle</small></h1>-->
            <!--<p>Some content</p>-->
            <!--<div style="width: 100%; padding: 10px; background:#000;height: 200px;"></div>-->
          <!--</div>-->
          <!--<div class="w-100 p-md-3 p-2">-->
            <!--<h1>Header<small class="text-muted">subTitle</small></h1>-->
            <!--<p>Some content</p>-->
            <!--<div style="width: 100%; height: 200px; background: #46d3ff;"></div>-->
          <!--</div>-->
        <!--</div>-->
      <!--<div class="d-md-flex text-center">-->
        <!--<div class="w-100 p-md-3 p-2">-->
          <!--<h1>Header<small class="text-muted">subTitle</small></h1>-->
          <!--<p>Some content</p>-->
          <!--<div style="width: 100%; padding: 10px; background:#000;height: 200px;"></div>-->
        <!--</div>-->
        <!--<div class="w-100 p-md-3 p-2">-->
          <!--<h1>Header<small class="text-muted">subTitle</small></h1>-->
          <!--<p>Some content</p>-->
          <!--<div style="width: 100%; height: 200px; background: #46d3ff;"></div>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="d-md-flex text-center">-->
        <!--<div class="w-100 p-md-3 p-2">-->
          <!--<h1>Header<small class="text-muted">subTitle</small></h1>-->
          <!--<p>Some content</p>-->
          <!--<div style="width: 100%; padding: 10px; background:#000;height: 200px;"></div>-->
        <!--</div>-->
        <!--<div class="w-100 p-md-3 p-2">-->
          <!--<h1>Header<small class="text-muted">subTitle</small></h1>-->
          <!--<p>Some content</p>-->
          <!--<div style="width: 100%; height: 200px; background: #46d3ff;"></div>-->
        <!--</div>-->
      <!--</div>-->
        <!--<router-view></router-view>-->
    <!--</main>-->
    <p class="text-center text-muted">Ready.. Fight！</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">你又膨胀了</p>
    <p class="text-center text-muted">是，你膨胀了。</p>
    <p class="m-bottom-controller text-muted text-center">我们是有底线的。</p>
    <a href="#to_top" role="button" style="position: fixed; bottom: 60px; right: 10px;">
      <i class="fa fa-arrow-circle-up"></i>Top
    </a>
    <!--从此，这里是底部！！-->
    <footer class="p-md-2 p-lg-4 bg-dark footer-display-hidden">
      <a href="#to_top" class="bg-dark" role="button" style="position: fixed; bottom: 260px; right: 10px; border-radius: 10px">
        <i class="fa fa-arrow-circle-up"></i>Top
      </a>
      <div class="navbar-nav d-flex flex-row justify-content-start">
        <a href="#" class="nav-link p-2 mr-2">Google</a>
        <a href="#" class="nav-link p-2 mr-2">Twitter</a>
        <a href="#" class="nav-link p-2">FaceBook</a>
      </div>
      <div class="px-2">
        <p>Address: Shenzhen Social University ltd. co.</p>
        <p>CellPhone: 9999-8888-989</p>
        <p>Fax: 0796-7890-0987</p>
      </div>
    </footer>
    <!--移动端底部导航-->
    <div class="show-footer bg-dark text-center">
      <div class="d-flex footer-menu-control">
        <router-link to="/home" role="button" class="btn w-100 p-2"><i class="fa fa-drivers-license-o pr-1"></i>Home</router-link>
        <router-link to="/more" role="button" class="btn w-100 p-2"><i class="fa fa-plus-circle pr-1"></i>More</router-link>
        <router-link to="/order/all" role="button" class="btn w-100 p-2"><i class="fa fa-sticky-note-o pr-1"></i>Order</router-link>
        <router-link to="/userInfo" role="button" class="btn w-100 p-2"><i class="fa fa-user-o pr-1"></i>Me</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data: function () {
    return {
      msg: '这里是home',
      collapseJudge: false
    }
  },
  methods: {
    to_home: function () {
      this.$router.push('*')
    },
    toLogin: function () {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
  nav .nav-link:hover{
    color: #3c46ff!important;
  }
  footer{
    color: rgba(255, 255, 255, 0.5);
  }
  @media (max-width: 991.98px) {
    .marginTop{
      margin-top: 0.25rem;
    }
    .footer-display-hidden{
      display: none;
    }
    .show-footer{
      display: block;
      width: 100%;
      position: fixed;
      bottom: 0;
      margin-top: 2rem;
    }
    .m-bottom-controller{
      margin-bottom: 58px;
    }
  }
  .footer-menu-control a{
    box-shadow: none;
    color: white;
  }
  /*.footer-menu-control div:active{*/
    /*background-color: #fff3fc;*/
  /*}*/
  @media (min-width: 992px) {
    .show-footer{
      display: none;
    }
    .footer-display-hidden{
      position: fixed;
      width: 100%;
      bottom: 0;
    }
    .m-bottom-controller{
      margin-bottom: 230px;
    }
  }
  @media (max-width: 767.98px) {
    .carousel_size_control img{
      height: 40vh!important;
    }
  }
  @media (min-width: 767.98px) {
    .carousel_size_control img{
      height: 50vh!important;
    }
    /*.show-footer{*/
      /*display: none;*/
    /*}*/
  }
  @media (min-width: 1199.98px) {
    .carousel_size_control img{
      height: 60vh!important;
    }
  }
footer a{
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8) !important;
}
footer a:hover{
  color: rgb(255, 255, 255) !important;
  /*text-decoration: white;*/
}
</style>
